/*
 * @Description: 账单以及行程列表中小模块的样式
 * @Author: yingying.fan
 * @Date: 2019-04-10 10:21:01
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-10 10:36:55
 */
<template>
  <div
    class="flex-h flex-vc consume-item-wrapper"
    @click="goToDetail"
  >
    <img
      :src="iconUrl"
      :class="iconStyle"
    >
    <div class="flex1 consume-title-wrapper">
      <span class="fontsize28">{{title}}</span>
      <p>{{datetime}}</p>
    </div>
    <div class="flex-v flex-ve">
      <span :class="descStyle">{{desc}}</span>
      <!-- class="fontsize28" -->
      <p>&nbsp;{{refundState}}</p>
    </div>
  </div>
</template>

<script>
// import { dateFtt } from 'vue-xiaobu-utils'
import { getFriendlyTime } from '@/utils/FormatUtils.js'
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 下面这些是用于展示的数据
      iconUrl: '',
      title: '', // 展示标题
      datetime: '', // 时间
      desc: '', // 右边的价格或者状态描述
      refundState: '', // 退款状态
      iconStyle: '', // 图标样式
      descStyle: '', // 右边的样式
      // 下面这些不是用于展示的数据
      tradeNo: '', // 流水号
      state: null, // 状态
      price: '', // 金额
      tradeType: null // 交易类型
    }
  },
  watch: {
    data(newValue, oldValue) {
      if (newValue && JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
        this.setData()
      }
    }
  },
  mounted() {
    this.setData()
  },
  methods: {
    // 数据解析，需要的具体实现即可
    setData() {
    },
    // 跳转到详情，需要的具体实现即可
    goToDetail() {
    },
    formatData(date) {
      // 传入的日期的毫秒数
      return getFriendlyTime(date)
    }
  }
}
</script>

<style>
.consume-item-wrapper {
  height: 140px;
  margin: 0 30px;
  color: #333333;
  line-height: 1.4;
  background-color: #ffffff;
  font-size: 22px; /*px*/
}
.consume-item-wrapper > img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 30px;
}
.consume-fail-icon {
  background-color: #cccccc;
}
.consume-item-wrapper p {
  color: #999999;
}
.consume-title-wrapper {
  /* overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.2rem;
}
.consume-color-999 {
  color: #999999;
}
</style>
